<template>
  <a-table :dataSource="dataSource" :columns="columns" bordered>
    <template #default="{ record }">
      <template v-for="(stage, index) in record.stages">
        <td v-for="date in dates" :key="date" :class="{ 'in-range': isInDateRange(stage, date) }"></td>
      </template>
    </template>
  </a-table>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { ATable } from 'ant-design-vue'

export default {
  components: {
    ATable
  },
  setup() {
    const dataSource = reactive([
      // 这里放入你的数据
    ])

    const dates = computed(() => {
      // 计算所有的日期
    })

    const columns = computed(() => [
      {
        title: '项目名称',
        dataIndex: 'projectName',
        key: 'projectName'
      },
      {
        title: '项目阶段进度分类',
        dataIndex: 'stageType',
        key: 'stageType'
      },
      // 生成日期列
      ...dates.value.map(date => ({
        title: date,
        key: date
      }))
    ])

    function isInDateRange(stage, date) {
      // 如果日期在阶段的开始日期和结束日期之间，则返回 true
    }

    return {
      dataSource,
      columns,
      dates,
      isInDateRange
    }
  }
}
</script>

<style scoped>
.in-range {
  background-color: #1890ff;
}
</style>
